<script setup lang="ts">
  // import { version } from '../../package.json'
  //import SvgIcon from '/@/components/SvgIcon/index.vue'
  import { useAppStore } from '/@/store/modules/app'
  //import { framework } from './data'
  import Header from '/@/components/Header/index.vue'
  import Footer from '/@/components/Footer/index.vue'
  import { useDark, useToggle } from '@vueuse/core'

  import "/@/assets/iconfont.css";
  import "/@/assets/iconfont.js";

  // const title = ref('I want to study typescript')
  // 检测浏览器系统主题
  // const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
  // const appStore = useAppStore()
  // // const useStore = useUserStore()
  // const theme = computed(() => {
  //   return appStore.theme
  // })
  // const isDark = useDark({
  //   selector: 'body',
  //   attribute: 'arco-theme',
  //   valueDark: 'dark',
  //   valueLight: 'light',
  //   storageKey: 'arco-theme',
  //   onChanged(dark: boolean) {
  //     appStore.toggleTheme(dark)
  //   },
  // })
  // const toggleTheme = useToggle(isDark)

  //const data = ref(framework)
  // import router from "/@/router";
  // router.push({ path:'/homepage' })


</script>
<template>
  <div id="app">
    <Header />
        <router-view class="container warp" ></router-view>
    <Footer />
  </div>
</template>


<style lang="scss"  scoped>
  .warp{
      min-height:calc(100vh - 250px);
  }

  .container-width {
    width: 1200px;
    margin: 0 auto;
  }
  .app-container{
    padding:140px 0 20px 0;

  }

</style>